<template>
    <div class="mian" v-loading="false" element-loading-text="数据加载中">
        <div class="label">企业微信二维码</div>
        <el-upload
            action="#"
            list-type="picture-card"
            :limit="1"
            :auto-upload="false">
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                        <i class="el-icon-zoom-in"></i>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                        <i class="el-icon-delete"></i>
                    </span>
                </span>
                </div>
        </el-upload>
        <div class="label">二维码提醒内容(换行请用;隔开，例如：1：123456;2：123456;3：123456)</div>
        <el-input type="textarea" v-model="imageUrl" style="width: 300px;" rows="4"></el-input>
        <div class="label"></div>
        <el-button type="primary">提交</el-button>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
  export default {
    data() {
        return {
            imageUrl:'',
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false
        }
    },
    methods: {
      handleRemove(file) {
        console.log(file);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      },
    }
  }
</script>
<style scoped>
.label {
    font-size: 16px;
    padding: 10px 0;
}
</style>